<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>Ajax(detailed information) | yangjunbo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
    <meta name="keywords" content="MinHow,MinHow's Blog" />
  
  <meta name="description" content="1、服务器 前言：通俗的讲，能够提供某种服务的机器（计算机）称为服务器  1.1、服务器类型按照不同的划分标准，服务可划分为以下类型：  按服务类型可分为：文件服务器、数据库服务器、邮件服务器、Web服务器等； 按操作系统可分为：Linux服务器、Windows服务器等； 按应用软件可分为 Apache服务器、Nginx 服务器、IIS服务器、Tomcat服务器、weblogic服务器、WebSp">
<meta property="og:type" content="article">
<meta property="og:title" content="Ajax(detailed information)">
<meta property="og:url" content="http://yoursite.com/2016/06/05/- 副本/index.html">
<meta property="og:site_name" content="yangjunbo">
<meta property="og:description" content="1、服务器 前言：通俗的讲，能够提供某种服务的机器（计算机）称为服务器  1.1、服务器类型按照不同的划分标准，服务可划分为以下类型：  按服务类型可分为：文件服务器、数据库服务器、邮件服务器、Web服务器等； 按操作系统可分为：Linux服务器、Windows服务器等； 按应用软件可分为 Apache服务器、Nginx 服务器、IIS服务器、Tomcat服务器、weblogic服务器、WebSp">
<meta property="og:image" content="http://yoursite.com/2016/06/05/-%20副本/m_01.png">
<meta property="og:image" content="http://yoursite.com/2016/06/05/-%20副本/m_07.png">
<meta property="og:image" content="http://yoursite.com/2016/06/05/-%20副本/m_08.png">
<meta property="og:image" content="http://yoursite.com/2016/06/05/-%20副本/m_02.png">
<meta property="og:image" content="http://yoursite.com/2016/06/05/-%20副本/m_03.png">
<meta property="og:image" content="http://yoursite.com/2016/06/05/-%20副本/m_04.png">
<meta property="og:image" content="http://yoursite.com/2016/06/05/-%20副本/m_05.png">
<meta property="og:image" content="http://yoursite.com/2016/06/05/-%20副本/m_06.png">
<meta property="og:image" content="http://yoursite.com/2016/06/05/-%20副本/m_09.png">
<meta property="og:image" content="http://yoursite.com/2016/06/05/-%20副本/m_10.png">
<meta property="og:image" content="http://yoursite.com/2016/06/05/-%20副本/m_11.png">
<meta property="og:image" content="http://yoursite.com/2016/06/05/-%20副本/m_13.png">
<meta property="og:image" content="http://yoursite.com/2016/06/05/-%20副本/get请求.png">
<meta property="og:image" content="http://yoursite.com/2016/06/05/-%20副本/post请求.png">
<meta property="og:image" content="http://yoursite.com/2016/06/05/-%20副本/jk.png">
<meta property="og:updated_time" content="2017-08-27T13:34:38.905Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Ajax(detailed information)">
<meta name="twitter:description" content="1、服务器 前言：通俗的讲，能够提供某种服务的机器（计算机）称为服务器  1.1、服务器类型按照不同的划分标准，服务可划分为以下类型：  按服务类型可分为：文件服务器、数据库服务器、邮件服务器、Web服务器等； 按操作系统可分为：Linux服务器、Windows服务器等； 按应用软件可分为 Apache服务器、Nginx 服务器、IIS服务器、Tomcat服务器、weblogic服务器、WebSp">
<meta name="twitter:image" content="http://yoursite.com/2016/06/05/-%20副本/m_01.png">
  
  
    <link rel="icon" href="/favicon.ico">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="/css/style.css">
  <script src="/js/pace.min.js"></script>
  

  
  

</head>

<body>
  <div id="container">
      <header id="header">
    <div id="banner"></div>
    <div id="header-outer">
        <div id="header-row">
            <div id="logo">
                <a href="/">
                    <img src="/images/logo.png" alt="logo">
                </a>
            </div>
            <div class="header-info">
                <div id="header-title">
                    
                    <h2>
                        欢迎来到我的博客
                    </h2>
                    
                </div>
                <div id="header-description">
                    
                    <h3>
                        My name is yangjunbo
                    </h3>
                    
                </div>
            </div>
            <nav class="header-nav">
                <div class="social">
                    
                        <a title="Home"  href="http://yangjunboyjb.oschina.io/">
                            <i class="fa fa-home fa-2x"></i></a>
                    
                        <a title="Github" target="_blank" href="//github.com/wongminho">
                            <i class="fa fa-github fa-2x"></i></a>
                    
                        <a title="Weibo" target="_blank" href="http://weibo.com/5938689701/profile?topnav=1&wvr=6&is_all=1">
                            <i class="fa fa-weibo fa-2x"></i></a>
                    
                        <a   ">
                            <i class="fa fa-twitter fa-2x"></i></a>
                    
                </div>
            </nav>
        </div>
    </div>
</header>

      <div class="outer">
        <section id="main" class="body-wrap"><article id="post-- 副本" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="post-title" itemprop="name">
      Ajax(detailed information)
    </h1>
    <div class="post-title-bar">
      <ul>
          
        <li>
          <i class="fa fa-calendar"></i>  2016-06-05
        </li>
        <li>
          <i class="fa fa-eye"></i>
          <span id="busuanzi_value_page_pv"></span>
        </li>
      </ul>
    </div>
  

          
      </header>
    
    <div class="article-entry post-content" itemprop="articleBody">
      
            
            <h2 id="1、服务器"><a href="#1、服务器" class="headerlink" title="1、服务器"></a>1、服务器</h2><blockquote>
<p>前言：通俗的讲，能够提供某种服务的机器（计算机）称为服务器</p>
</blockquote>
<h4 id="1-1、服务器类型"><a href="#1-1、服务器类型" class="headerlink" title="1.1、服务器类型"></a>1.1、服务器类型</h4><p>按照不同的划分标准，服务可划分为以下类型：</p>
<ol>
<li>按<strong>服务类型</strong>可分为：文件服务器、数据库服务器、邮件服务器、Web服务器等；</li>
<li>按<strong>操作系统</strong>可分为：Linux服务器、Windows服务器等；</li>
<li>按<strong>应用软件</strong>可分为 Apache服务器、Nginx 服务器、IIS服务器、Tomcat服务器、<br>weblogic服务器、WebSphere服务器、boss服务器、 Node服务器等；</li>
</ol>
<h4 id="1-2、服务器软件"><a href="#1-2、服务器软件" class="headerlink" title="1.2、服务器软件"></a>1.2、服务器软件</h4><p>使计算机具备提供某种服务能力的应用软件，称为服务器软件，<br>通过安装相应的服务软件，然后进行配置后就可以使计算具备了提供某种服务的能力。</p>
<p>常见的服务器软件有：</p>
<ol>
<li>文件服务器：Server-U、FileZilla、VsFTP等（FTP是File Transfer Protocol文件传输协议）；</li>
<li>数据库服务器：oracle、mysql、SQL server、DB2、ACCESS等；</li>
<li>邮件服务器：Postfix、Sendmail等；</li>
<li><strong>HTTP服务器</strong>：Apache、Nginx、IIS、Tomcat、NodeJS等；</li>
</ol>
<h4 id="1-3、HTTP服务器"><a href="#1-3、HTTP服务器" class="headerlink" title="1.3、HTTP服务器"></a>1.3、HTTP服务器</h4><p>即网站服务器，主要提供文档(文本、图片、视频、音频)浏览服务，一般安装Apache、Nginx服务器软件。</p>
<p>HTTP服务器可以结合某一编程语言处理业务逻辑，由此进行的开发，通常称之为<strong>服务端开发</strong>。 </p>
<p>常见的运行在服务端的编程语言包括 php、java、.net、Python、Ruby、Perl等。  </p>
<h2 id="2、客户端"><a href="#2、客户端" class="headerlink" title="2、客户端"></a>2、客户端</h2><p>具有向服务器<strong>索取服务</strong>能力的终端，如比如 手机、电脑等，通过安装不同的客户端软件，<br>可以获取不同的服务，比如通过QQ获得即时通讯服务、通过迅雷获得下载服务等。</p>
<p>常见的客户端软件：浏览器、QQ、迅雷、Foxmail等。</p>
<p>以浏览器为宿主环境，结合 HTML、CSS、Javascript等技术，而进行的一系列开发，通常称之为<strong>前端开发</strong>。</p>
<h2 id="3、网络基础"><a href="#3、网络基础" class="headerlink" title="3、网络基础"></a>3、网络基础</h2><h4 id="3-1-IP地址"><a href="#3-1-IP地址" class="headerlink" title="3.1 IP地址"></a>3.1 IP地址</h4><p>所谓IP地址就是给每个连接在互联网上的主机分配的一个32位地址。(就像每部手机能正常通话需要一个号码一样)</p>
<p>查看本机IP地址 ping、ipconfig、ifconfig（linux）</p>
<h4 id="3-2、域名"><a href="#3-2、域名" class="headerlink" title="3.2、域名"></a>3.2、域名</h4><p>由于IP地址基于数字，不方便记忆，于是便用域名来代替IP地址，域名是一个IP地址的“面具”  </p>
<p>查看域名对应的IP地址 ping</p>
<h4 id="3-3、DNS服务"><a href="#3-3、DNS服务" class="headerlink" title="3.3、DNS服务"></a>3.3、DNS服务</h4><p>DNS（Domain Name System）因特网上作为域名和IP地址相互映射的一个分布式数据库，<br>能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。</p>
<p>简单的说就是记录IP地址和域名之间对应关系的服务。</p>
<p>查找优先级 本机hosts文件、DNS服务器</p>
<p>ipconfig /flushdns 刷新DNS</p>
<h4 id="3-4、端口"><a href="#3-4、端口" class="headerlink" title="3.4、端口"></a>3.4、端口</h4><p>端口号是计算机与外界通讯交流的出口，每个端口对应不同的服务。</p>
<p><em>现实生活中，银行不同的窗口办理不同的业务。</em></p>
<p>查看端口占用情况 netstat -an</p>
<p>常见端口号 80、8080、3306、21、22</p>
<h2 id="4、软件架构"><a href="#4、软件架构" class="headerlink" title="4、软件架构"></a>4、软件架构</h2><h4 id="4-1、C-S结构"><a href="#4-1、C-S结构" class="headerlink" title="4.1、C/S结构"></a>4.1、C/S结构</h4><p>即<strong>C</strong>lient、<strong>S</strong>erver</p>
<p>C/S工作流程图</p>
<p><img src="m_01.png" alt="alt_text"></p>
<p>在C/S结构的情况下，不同的服务需要安装不同的客户端软件，</p>
<p>比如QQ、迅雷、Foxmail这种情况下安装的软件会越来越多，同时也有许多弊端，</p>
<p>比如A出差，需要在B电脑上查收邮件，但是B电脑并未安装Foxmail等类似的客户端软件，</p>
<p>这样不得不先去下载Foxmail，非常不方便。</p>
<h4 id="4-2、B-S结构"><a href="#4-2、B-S结构" class="headerlink" title="4.2、B/S结构"></a>4.2、B/S结构</h4><p>B/S（即<strong>B</strong>roswer、<strong>S</strong>erver）解决了C/S所带来的不便，</p>
<p>将所有的服务都可以通过浏览器来完成（因为基本所有浏览器都安装了浏览器），</p>
<p>但B/S也有一些不利，比如操作稳定性、流畅度等方面相对较弱。</p>
<h2 id="5、搭建HTTP服务"><a href="#5、搭建HTTP服务" class="headerlink" title="5、搭建HTTP服务"></a>5、搭建HTTP服务</h2><blockquote>
<p>Windows + Apache + Mysql + PHP，首字母组合。</p>
</blockquote>
<h4 id="5-1-安装WampServer"><a href="#5-1-安装WampServer" class="headerlink" title="5.1 安装WampServer"></a>5.1 安装WampServer</h4><p>安装wampserver，和普通软件安装无差别，除指定安装路径外，其它默认安装。</p>
<h4 id="5-2-管理HTTP服务"><a href="#5-2-管理HTTP服务" class="headerlink" title="5.2 管理HTTP服务"></a>5.2 管理HTTP服务</h4><p>任务图标<strong>绿色为正常启动</strong>状态<br>通过图形控制台可以启动、重启、停止所有服务<br><img src="m_07.png" alt=""></p>
<p>或者单独启动、重启、停止特定服务<br><img src="m_08.png" alt=""></p>
<p><strong>注意事项：</strong><br>1、检查网络是不是通的 ping 对方IP<br>2、检查防火墙是否开启，如果开启将不能正常被访问<br>3、检查访问权限 <strong>Allow from all</strong><br>4、理解默认索引<br>5、确保端口没有被<strong>其它程序</strong>占用<br>6、“#”表示注释<br>7、修改配置要格外小心，禁止<strong>无意修改</strong>其它内容  </p>
<h4 id="5-3-配置根目录"><a href="#5-3-配置根目录" class="headerlink" title="5.3 配置根目录"></a>5.3 配置根目录</h4><p>网站根目录是Web服务器上存放网站程序的空间，可通过修改配置文件自定义，如E:/www</p>
<p><strong>具体步骤如下：</strong><br>1、打开配置文件，控制台选择<br><img src="m_02.png" alt=""><br>或者 wampserver安装目录下bin\apache\Apache2.2.21\conf\httpd.conf</p>
<p>2、设定根目录，查找并修改<br><img src="m_03.png" alt=""><br>例如：<br><img src="m_04.png" alt=""><br>这样就指定了 “E:/www/“为存放网站的根目录。</p>
<p>3、配置根目录，查找<br><img src="m_05.png" alt=""><br>修改成<br><img src="m_06.png" alt=""> </p>
<p>4、修改完后，并不能立即生效，需要  <strong>重启Apache</strong><br>   <strong>注：可以指定任意目录为根目录</strong></p>
<h4 id="5-4-网站部署"><a href="#5-4-网站部署" class="headerlink" title="5.4 网站部署"></a>5.4 网站部署</h4><p>将我们制作好的网页<strong>拷贝</strong>到配置好的根目录下，浏览器访问127.0.0.1即可。</p>
<h4 id="5-5配置虚拟主机"><a href="#5-5配置虚拟主机" class="headerlink" title="5.5配置虚拟主机"></a>5.5配置虚拟主机</h4><p>在一台Web服务器上，我们可以通过配置虚拟主机，然后分别设定根目录，实现对多个网站的管理。</p>
<p>具体步骤如下：  </p>
<p>1、开启虚拟主机辅配置，在httpd.conf 中找到  </p>
<p><img src="m_09.png" alt="">  </p>
<p>去掉前面的#号注释，开启虚拟主机配置</p>
<p>2、配置虚拟主机，打开conf/extra/httpd-vhosts.conf   </p>
<p> <img src="m_10.png" alt=""> </p>
<p>分别修改以下三项  </p>
<p>DocumentRoot “E:/www/example”<br>ServerName “example.com “<br>ServerAlias “www.example.com”  </p>
<p>其它项无需指定。</p>
<p>3、修改DNS（hosts）文件<br>打开C:\Windows\System32\drivers\etc\hosts<br>目录是固定的<br><img src="m_11.png" alt=""><br>注：修改hosts文件权限</p>
<p>4、重启Apache</p>
<p>5、浏览器访问www.example.com</p>
<h2 id="6、PHP基础"><a href="#6、PHP基础" class="headerlink" title="6、PHP基础"></a>6、PHP基础</h2><blockquote>
<p>文件以.php后缀结尾，所有程序包含在&lt;?php <strong> 这里是代码 </strong> ?&gt;<br>避免使用中文目录和中文文件名<br>php页面无法直接打开需要运行在服务器环境当中</p>
</blockquote>
<h4 id="6-1、最简单的php程序"><a href="#6-1、最简单的php程序" class="headerlink" title="6.1、最简单的php程序"></a>6.1、最简单的php程序</h4><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;?php</span></div><div class="line">	<span class="comment">// 用来指定编码集</span></div><div class="line">	header(<span class="string">'Content-Type:text/html; charset=utf-8'</span>);</div><div class="line">	<span class="comment">/*这是一个最简单的php程序*/</span></div><div class="line">	<span class="keyword">echo</span> <span class="string">'hello world!'</span>;</div><div class="line"><span class="meta">?&gt;</span></div></pre></td></tr></table></figure>
<h4 id="6-3、变量"><a href="#6-3、变量" class="headerlink" title="6.3、变量"></a>6.3、变量</h4><p>1、变量以$开头 字母/数字/下划线 不能以数字开头<br>2、大小写敏感（区分大小写）</p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">  <span class="comment">// 声明一个变量$a并赋值为10</span></div><div class="line">  $a = <span class="number">10</span>;</div><div class="line"><span class="comment">// 输出一个变量$a</span></div><div class="line">  <span class="keyword">echo</span> $a;</div><div class="line">  <span class="comment">// 声明一个变量$b并赋值为10</span></div><div class="line">  $b = <span class="number">10</span>;</div><div class="line">  <span class="comment">// 输出一个变量$b</span></div><div class="line">  <span class="keyword">echo</span> $b;</div><div class="line">  </div><div class="line">  <span class="comment">// 输出顺序是自上向下的</span></div><div class="line">  <span class="comment">// 相当于 js dcoument.write()</span></div></pre></td></tr></table></figure>
<h4 id="6-3、数据类型"><a href="#6-3、数据类型" class="headerlink" title="6.3、数据类型"></a>6.3、数据类型</h4><p><strong>字符型</strong><br><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$str = <span class="string">'hello world!'</span>;</div></pre></td></tr></table></figure></p>
<p><strong>整型</strong><br><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$num = <span class="number">10</span>;</div></pre></td></tr></table></figure></p>
<p><strong>浮点型</strong><br><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$float = <span class="number">10.5</span>;</div></pre></td></tr></table></figure></p>
<p><strong>布尔型</strong><br><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$bool = <span class="keyword">true</span>;</div></pre></td></tr></table></figure></p>
<p><strong>数组</strong><br><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// Javascript 数组定义方式 var arr = [1, 2, 3]</span></div><div class="line"><span class="comment">// arr[0]、arr[1]、arr[1]</span></div><div class="line"></div><div class="line"><span class="comment">// PHP 是这样定义数组的</span></div><div class="line"><span class="comment">// 这种方式叫做**索引数组**</span></div><div class="line">$arr = <span class="keyword">array</span>(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>);	</div><div class="line"></div><div class="line"><span class="comment">// echo $arr[0];</span></div><div class="line"><span class="comment">// echo $arr[2];</span></div><div class="line"></div><div class="line"><span class="comment">// 定义方式和Javascript有区别，但是访问方式是一样的</span></div></pre></td></tr></table></figure></p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// var obj = &#123;name: itcast, age: 10&#125;</span></div><div class="line"></div><div class="line"><span class="comment">// PHP另一种定定数组的方式，所表达的意义和Javascript一样，</span></div><div class="line"><span class="comment">// 只是语法格式不一样</span></div><div class="line"><span class="comment">// 这种方式叫做**关联数组**</span></div><div class="line">$arr1 = <span class="keyword">array</span>(<span class="string">'name'</span>=&gt;<span class="string">'itcast'</span>, <span class="string">'age'</span>=&gt;<span class="number">10</span>);</div><div class="line"></div><div class="line"><span class="comment">// echo $arr1['name'];</span></div><div class="line"><span class="comment">// echo $arr1['age'];</span></div></pre></td></tr></table></figure>
<p><strong>对象</strong><br><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// Javascript var obj = &#123;name: itcast, age: 10&#125;</span></div><div class="line"><span class="comment">// PHP需要先创建一个类，下面就是创建过程</span></div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">Person</span> </span>&#123;</div><div class="line">    <span class="keyword">public</span> $name = <span class="string">'itcast'</span>;</div><div class="line"></div><div class="line">    <span class="keyword">public</span> $age = <span class="number">10</span>;</div><div class="line">&#125;</div><div class="line"></div><div class="line">$person = <span class="keyword">new</span> Person;</div><div class="line"></div><div class="line"><span class="comment">// PHP访问一个对象属性的语法是不一样的</span></div><div class="line"><span class="keyword">echo</span> $person-&gt;name;</div><div class="line"></div><div class="line"><span class="comment">// obj['name']; obj.name 不行</span></div></pre></td></tr></table></figure></p>
<p><strong>NULL</strong><br><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//PHP中一种特殊的数据类型，表示空值，即表示没有为该变量设置任何值null(空值)不区分大小写，null和NULL是一样的。</span></div></pre></td></tr></table></figure></p>
<p><strong>单引号&amp;双引号区别： </strong> 单引号内部的变量不会执行双引号会执行<br><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">$name = <span class="string">'小明'</span>;</div><div class="line"></div><div class="line"><span class="keyword">echo</span> <span class="string">'name is $name'</span>;<span class="comment">//输出 name is $name</span></div><div class="line"><span class="keyword">echo</span> <span class="string">'&lt;br&gt;'</span>;</div><div class="line"><span class="keyword">echo</span> <span class="string">"name is $name"</span>;<span class="comment">//输出 name is 小明</span></div></pre></td></tr></table></figure></p>
<p>索引数组、关联数组（了解即可）</p>
<h4 id="6-4、运算符-amp-内容输出"><a href="#6-4、运算符-amp-内容输出" class="headerlink" title="6.4、运算符&amp;内容输出"></a>6.4、运算符&amp;内容输出</h4><pre><code>基本与Javascript语法一致  
. 号表示字符串拼接符，Javascript中为+号
</code></pre><p>echo：输出简单数据类型，如字符串、数值<br><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/**</span></div><div class="line"><span class="comment">* 连接符</span></div><div class="line"><span class="comment">* Javascript中用+号表示连接符</span></div><div class="line"><span class="comment">* PHP中使用.点号</span></div><div class="line"><span class="comment">*/</span></div><div class="line"></div><div class="line">$hello = <span class="string">'hello'</span>;</div><div class="line"></div><div class="line">$world = <span class="string">'world!'</span>;</div><div class="line"></div><div class="line"><span class="comment">// PHP连接符用.号</span></div><div class="line"><span class="keyword">echo</span> $hello . <span class="string">' '</span> .$world;</div></pre></td></tr></table></figure></p>
<p>print_r()：输出复杂数据类型，如数组<br><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">$arr = <span class="keyword">array</span>(<span class="string">'itcast'</span>, <span class="string">'今年'</span>, <span class="string">'10岁了'</span>);</div><div class="line"></div><div class="line"><span class="comment">// 只能输出简单类型</span></div><div class="line"><span class="keyword">echo</span> $arr;</div><div class="line"></div><div class="line"><span class="comment">// 可以打印数组，但是输出的是一个数组的结构</span></div><div class="line">print_r($arr);</div></pre></td></tr></table></figure></p>
<p>var_dump()：输出详细信息，如对象、数组（了解）<br><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">$arr = <span class="keyword">array</span>(<span class="string">'itcast'</span>, <span class="string">'今年'</span>, <span class="string">'10岁了'</span>);</div><div class="line"></div><div class="line"><span class="comment">// 只能输出简单类型</span></div><div class="line"><span class="keyword">echo</span> $arr;</div><div class="line"></div><div class="line"><span class="comment">// 输出详细信息</span></div><div class="line">var_dump($arr);</div><div class="line"></div><div class="line">$hello = <span class="string">'hello'</span>;</div><div class="line"><span class="comment">// 输出详细信息</span></div><div class="line">var_dump($hello);</div></pre></td></tr></table></figure></p>
<h4 id="6-5、函数"><a href="#6-5、函数" class="headerlink" title="6.5、函数"></a>6.5、函数</h4><p>基本与Javascript基本一致  </p>
<p>函数名对大小写不敏感<br>默认参数（了解即可）  </p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">   <span class="comment">// 1、PHP中函数不可以省略参数</span></div><div class="line"><span class="comment">// 2、PHP可以设置默认参数</span></div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">sayHello</span><span class="params">($name=<span class="string">'web developer'</span>)</span> </span>&#123;</div><div class="line">	<span class="keyword">echo</span> $name . <span class="string">'你好!'</span>;</div><div class="line">&#125;</div><div class="line"></div><div class="line">sayHello();</div></pre></td></tr></table></figure>
<h4 id="6-6、分支，循环语句"><a href="#6-6、分支，循环语句" class="headerlink" title="6.6、分支，循环语句"></a>6.6、分支，循环语句</h4><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/**</span></div><div class="line"><span class="comment"> * 分支控制语句、循环语句</span></div><div class="line"><span class="comment"> * 与Javascript一样</span></div><div class="line"><span class="comment"> * foreach 数组遍历函数，类似Javascript中的 for in</span></div><div class="line"><span class="comment"> */</span></div><div class="line"> $name = <span class="string">'itcast1'</span>;</div><div class="line"> </div><div class="line"> <span class="keyword">if</span>($name == <span class="string">'itcast'</span>) &#123;</div><div class="line">    <span class="keyword">echo</span> <span class="string">'我已经在'</span> . $name . <span class="string">'学习'</span>;</div><div class="line"> &#125; <span class="keyword">else</span> &#123;</div><div class="line">    <span class="keyword">echo</span> <span class="string">'我还没有学习过编程'</span>;</div><div class="line"> &#125;</div></pre></td></tr></table></figure>
<figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/**</span></div><div class="line"><span class="comment"> * 分支控制语句、循环语句</span></div><div class="line"><span class="comment"> * 与Javascript一样</span></div><div class="line"><span class="comment"> * foreach 数组遍历函数，类似Javascript中的 for in</span></div><div class="line"><span class="comment"> */</span></div><div class="line"><span class="comment">// 索引数组</span></div><div class="line">$arr = <span class="keyword">array</span>(<span class="string">'itcast'</span>, <span class="string">'今年'</span>, <span class="string">'10岁了'</span>);</div><div class="line"> </div><div class="line"><span class="comment">// PHP函数，计算数组的长度</span></div><div class="line">$length = count($arr);</div><div class="line"> </div><div class="line"><span class="comment">// echo $length;</span></div><div class="line"> </div><div class="line"><span class="comment">// 和Javascript是一样的</span></div><div class="line"><span class="comment">// for($i=0; $i&lt;$length; $i++) &#123;</span></div><div class="line"><span class="comment">// 	echo $arr[$i];</span></div><div class="line"><span class="comment">// &#125;</span></div><div class="line"> </div><div class="line"><span class="keyword">foreach</span>($arr <span class="keyword">as</span> $k=&gt;$v) &#123;</div><div class="line">    <span class="keyword">echo</span> $k . <span class="string">'~~~'</span> . $v;</div><div class="line">&#125;;</div><div class="line"> </div><div class="line"><span class="comment">// 关联数组</span></div><div class="line">$arr1 = <span class="keyword">array</span>(<span class="string">'name'</span>=&gt;<span class="string">'itcast'</span>, <span class="string">'age'</span>=&gt;<span class="string">'10'</span>);</div><div class="line"> </div><div class="line"><span class="comment">// 验证关联数组不可以按索引下标来访问</span></div><div class="line"><span class="comment">// echo $arr1[0];</span></div><div class="line"> </div><div class="line"> <span class="comment">//PHP遍历一个关联数组</span></div><div class="line"> <span class="keyword">foreach</span>($arr1 <span class="keyword">as</span> $key=&gt;$val) &#123;</div><div class="line">    <span class="keyword">echo</span> $key . <span class="string">'~~~'</span> . $val;</div><div class="line"> &#125;</div><div class="line"> </div><div class="line"> <span class="comment">// 实际开发都是用foreach来遍历数组的</span></div></pre></td></tr></table></figure>
<h4 id="6-7、表单处理"><a href="#6-7、表单处理" class="headerlink" title="6.7、表单处理"></a>6.7、表单处理</h4><p>表单name属性的是用来提供给服务端接收所传递数据而设置的 </p>
<p>表单action属性设置接收数据的处理程序</p>
<p>表单method属性设置发送数据的方式</p>
<p>当上传文件是需要设置 enctype=”multipart/form-data”，且只能post方式</p>
<p>$_GET接收 get 传值</p>
<p>$_POST接收 post 传值</p>
<p>$_FILES接收文件上传  </p>
<pre><code>move_uploaded_file($_FILES[&apos;image&apos;][&apos;tmp_name&apos;], &apos;test.jpg&apos;);
</code></pre><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">"login.php"</span> <span class="attr">method</span>=<span class="string">"post"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">label</span>&gt;</span>用户：<span class="tag">&lt;/<span class="name">label</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"username"</span>/&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">label</span>&gt;</span>密码：<span class="tag">&lt;/<span class="name">label</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"password"</span> <span class="attr">name</span>=<span class="string">"password"</span>/&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"submit"</span> <span class="attr">value</span>=<span class="string">"登录"</span>/&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">"login.php"</span> <span class="attr">method</span>=<span class="string">"post"</span> <span class="attr">enctype</span>=<span class="string">"multipart/form-data"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">label</span>&gt;</span>图片：<span class="tag">&lt;/<span class="name">label</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"file"</span> <span class="attr">name</span>=<span class="string">"image"</span>/&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"submit"</span> <span class="attr">value</span>=<span class="string">"上传"</span>/&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></div></pre></td></tr></table></figure>
<h4 id="6-8、文件导入-amp-amp-常用php函数"><a href="#6-8、文件导入-amp-amp-常用php函数" class="headerlink" title="6.8、文件导入&amp;&amp;常用php函数"></a>6.8、文件导入&amp;&amp;常用php函数</h4><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">include</span> <span class="string">'07.form.html'</span>;</div><div class="line"></div><div class="line"><span class="keyword">require</span> <span class="string">'07.form.php'</span></div></pre></td></tr></table></figure>
<figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">$array = <span class="keyword">array</span>(</div><div class="line">    <span class="string">'username'</span>=&gt;<span class="string">'itcast'</span>,</div><div class="line">    <span class="string">'password'</span>=&gt;<span class="string">'123456'</span></div><div class="line">);</div><div class="line"></div><div class="line"><span class="keyword">echo</span> <span class="string">'获取数组的长度：'</span>.count($array);</div><div class="line"><span class="keyword">echo</span> <span class="string">'&lt;br&gt;'</span>;</div><div class="line"><span class="keyword">echo</span> <span class="string">'判断是否在数组中：'</span>.in_array(<span class="string">'itcast'</span>,$array);</div><div class="line"><span class="keyword">echo</span> <span class="string">'&lt;br&gt;'</span>;</div><div class="line"><span class="keyword">echo</span> <span class="string">'检测数组中是否存在key：'</span>.array_key_exists(<span class="string">'username'</span>,$array);</div><div class="line"><span class="keyword">echo</span> <span class="string">'&lt;br&gt;'</span>;</div></pre></td></tr></table></figure>
<h4 id="6-9、应用实例"><a href="#6-9、应用实例" class="headerlink" title="6.9、应用实例"></a>6.9、应用实例</h4><p>1、用户登录  </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">"login.php"</span> <span class="attr">method</span>=<span class="string">"post"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">label</span>&gt;</span>用户：<span class="tag">&lt;/<span class="name">label</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"username"</span>/&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">label</span>&gt;</span>密码：<span class="tag">&lt;/<span class="name">label</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"password"</span> <span class="attr">name</span>=<span class="string">"password"</span>/&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"submit"</span> <span class="attr">value</span>=<span class="string">"登录"</span>/&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></div></pre></td></tr></table></figure>
<figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;?php</span></div><div class="line">    header(<span class="string">'Content-Type:text/html; charset=utf-8'</span>);</div><div class="line"></div><div class="line">    <span class="comment">/*数据库当中的数据*/</span></div><div class="line">    $userInfo = <span class="keyword">array</span>(</div><div class="line">        <span class="string">'username'</span>=&gt;<span class="string">'itcast'</span>,</div><div class="line">        <span class="string">'password'</span>=&gt;<span class="string">'123456'</span></div><div class="line">    );</div><div class="line"></div><div class="line">    <span class="comment">/*拿到提交过来的数据*/</span></div><div class="line">    $username = $_POST[<span class="string">'username'</span>];</div><div class="line">    $password = $_POST[<span class="string">'password'</span>];</div><div class="line"></div><div class="line">    <span class="comment">/*去匹配数据库当中的数据*/</span></div><div class="line">    <span class="keyword">if</span>($userInfo[<span class="string">'username'</span>] == $username &amp;&amp; $userInfo[<span class="string">'password'</span>] == $password)&#123;</div><div class="line">        header(<span class="string">'refresh:0;url=jdMsite/'</span>);</div><div class="line">    &#125;<span class="keyword">else</span>&#123;</div><div class="line">        header(<span class="string">'refresh:0;url=login.html'</span>);</div><div class="line">    &#125;</div><div class="line"><span class="meta">?&gt;</span></div></pre></td></tr></table></figure>
<p>2、动态网站   </p>
<p><strong>京东首页</strong><br><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;?php</span></div><div class="line">    header(<span class="string">'Content-Type:text/html; charset=utf-8'</span>);</div><div class="line"></div><div class="line">    $product_list = <span class="keyword">array</span>(</div><div class="line">        <span class="keyword">array</span>(</div><div class="line">        <span class="string">'imgUrl'</span>=&gt;<span class="string">'images/detail01.jpg'</span>,</div><div class="line">        <span class="string">'newPrice'</span>=&gt;<span class="string">'15.00'</span>,</div><div class="line">        <span class="string">'oldPrice'</span>=&gt;<span class="string">'19.00'</span></div><div class="line">        ),</div><div class="line">        <span class="keyword">array</span>(</div><div class="line">        <span class="string">'imgUrl'</span>=&gt;<span class="string">'images/detail02.jpg'</span>,</div><div class="line">        <span class="string">'newPrice'</span>=&gt;<span class="string">'133.00'</span>,</div><div class="line">        <span class="string">'oldPrice'</span>=&gt;<span class="string">'234.00'</span></div><div class="line">        ),</div><div class="line">        <span class="keyword">array</span>(</div><div class="line">        <span class="string">'imgUrl'</span>=&gt;<span class="string">'images/detail01.jpg'</span>,</div><div class="line">        <span class="string">'newPrice'</span>=&gt;<span class="string">'340.00'</span>,</div><div class="line">        <span class="string">'oldPrice'</span>=&gt;<span class="string">'1432.00'</span></div><div class="line">        )</div><div class="line">    );</div><div class="line"></div><div class="line">    <span class="keyword">include</span> <span class="string">'index.html'</span>;</div><div class="line"><span class="meta">?&gt;</span></div></pre></td></tr></table></figure></p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">&lt;!--掌上秒杀的内容是会更新的而且是后台更新--&gt;</div><div class="line">&lt;ul class="sk_product"&gt;</div><div class="line">    <span class="meta">&lt;?php</span> <span class="keyword">foreach</span>($product_list <span class="keyword">as</span> $key =&gt; $val)&#123; <span class="meta">?&gt;</span></div><div class="line">        &lt;li&gt;</div><div class="line">            &lt;a href=<span class="string">"#"</span>&gt;&lt;img src=<span class="string">"&lt;?php echo $val['imgUrl'] ?&gt;"</span> alt=<span class="string">""</span>/&gt;&lt;/a&gt;</div><div class="line">            &lt;p class="new_price"&gt;&amp;yen;&lt;?php echo $val['newPrice'] ?&gt;&lt;/p&gt;</div><div class="line">            &lt;p class="old_price"&gt;&amp;yen;&lt;?php echo $val['oldPrice'] ?&gt;&lt;/p&gt;</div><div class="line">        &lt;/li&gt;</div><div class="line">    <span class="meta">&lt;?php</span> &#125; <span class="meta">?&gt;</span></div><div class="line">&lt;/ul&gt;</div></pre></td></tr></table></figure>
<p><strong>京东分类</strong></p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;?php</span></div><div class="line">    header(<span class="string">'Content-Type:text/html; charset=utf-8'</span>);</div><div class="line"></div><div class="line">    $category = <span class="keyword">array</span>(</div><div class="line">        <span class="string">'热门推荐'</span>,</div><div class="line">        <span class="string">'潮流女装'</span>,</div><div class="line">        <span class="string">'品牌男装'</span>,</div><div class="line">        <span class="string">'内衣配饰'</span>,</div><div class="line">        <span class="string">'家用电器'</span>,</div><div class="line">        <span class="string">'电脑办公'</span>,</div><div class="line">        <span class="string">'手机数码'</span>,</div><div class="line">        <span class="string">'母婴频道'</span>,</div><div class="line">        <span class="string">'图书'</span>,</div><div class="line">        <span class="string">'家居家纺'</span>,</div><div class="line">        <span class="string">'居家生活'</span>,</div><div class="line">        <span class="string">'家具建材'</span>,</div><div class="line">        <span class="string">'热门推荐'</span>,</div><div class="line">        <span class="string">'潮流女装'</span>,</div><div class="line">        <span class="string">'品牌男装'</span>,</div><div class="line">        <span class="string">'内衣配饰'</span>,</div><div class="line">        <span class="string">'家用电器'</span>,</div><div class="line">        <span class="string">'电脑办公'</span>,</div><div class="line">        <span class="string">'手机数码'</span>,</div><div class="line">        <span class="string">'母婴频道'</span>,</div><div class="line">        <span class="string">'居家生活'</span>,</div><div class="line">        <span class="string">'手机数码'</span>,</div><div class="line">        <span class="string">'母婴频道'</span>,</div><div class="line">        <span class="string">'图书'</span>,</div><div class="line">        <span class="string">'家居家纺'</span>,</div><div class="line">        <span class="string">'居家生活'</span>,</div><div class="line">        <span class="string">'潮流女装'</span>,</div><div class="line">        <span class="string">'家具建材'</span>,</div><div class="line">        <span class="string">'热门推荐'</span>,</div><div class="line">        <span class="string">'潮流女装'</span>,</div><div class="line">    );</div><div class="line"></div><div class="line">    <span class="comment">//echo count($category);</span></div><div class="line"></div><div class="line">    <span class="keyword">include</span> <span class="string">'category.html'</span>;</div><div class="line"><span class="meta">?&gt;</span></div></pre></td></tr></table></figure>
<figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">&lt;!--左侧分类--&gt;</div><div class="line">&lt;div class="jd_cate_left"&gt;</div><div class="line">    &lt;ul&gt;</div><div class="line">        <span class="meta">&lt;?php</span> <span class="keyword">foreach</span>($category <span class="keyword">as</span> $key=&gt;$val)&#123; <span class="meta">?&gt;</span></div><div class="line">            &lt;li class="&lt;?php echo $key==1?'now':'' ?&gt;"&gt;&lt;a href="javascript:;"&gt;&lt;?php echo $val ?&gt;&lt;/a&gt;&lt;/li&gt;</div><div class="line">        <span class="meta">&lt;?php</span> &#125; <span class="meta">?&gt;</span></div><div class="line">    &lt;/ul&gt;</div><div class="line">&lt;/div&gt;</div></pre></td></tr></table></figure>
<h2 id="7、网络传输协议"><a href="#7、网络传输协议" class="headerlink" title="7、网络传输协议"></a>7、网络传输协议</h2><h4 id="7-1、常见协议"><a href="#7-1、常见协议" class="headerlink" title="7.1、常见协议"></a>7.1、常见协议</h4><p>1、HTTP、HTTPS 超文本传输协议 </p>
<p>2、FTP 文件传输协议</p>
<p>3、SMTP 简单邮件传输协议</p>
<h4 id="7-2、http协议"><a href="#7-2、http协议" class="headerlink" title="7.2、http协议"></a>7.2、http协议</h4><p>超文本传输协议（HTTP，HyperText Transfer Protocol) 网站是基于HTTP协议的，<br>例如网站的图片、CSS、JS等都是基于HTTP协议进行传输的。</p>
<p>HTML  Hypertext Markup Language</p>
<p>HTTP协议是由从客户机到服务器的请求(Request)和从服务器到客户机的响应(Response)进行了约束和规范。</p>
<p>即HTTP协议主要由请求和响应构成。</p>
<p><img src="m_13.png" alt=""></p>
<p>常用请求方法 <strong>POST</strong>、<strong>GET</strong>、PUT、DELETE</p>
<p>我们通过浏览器插件 FireFox httpFox  调试。ctrl shift f2 调用</p>
<h5 id="7-2-1、请求和请求报文"><a href="#7-2-1、请求和请求报文" class="headerlink" title="7.2.1、请求和请求报文"></a>7.2.1、请求和请求报文</h5><p>请求由客户端发起，其规范格式为：请求行、请求头、请求主体。</p>
<ul>
<li><strong>1、请求行</strong></li>
</ul>
<p>由请求方式、请求URL和协议版本构成</p>
<pre><code>GET /day01/code/login.php?username=123&amp;password=123 HTTP/1.1

POST /day01/code/login.php HTTP/1.1
</code></pre><ul>
<li><strong>2、请求头</strong></li>
</ul>
<p>Host：localhost请求的主机</p>
<p>Cache-Control：max-age=0控制缓存</p>
<p>Accept：<em>/</em> 接受的文档MIME类型</p>
<p>User-Agent：很重要</p>
<p>Referer：从哪个URL跳转过来的</p>
<p>Accept-Encoding：可接受的压缩格式</p>
<p>If-None-Match：记录服务器响应的ETag值，用于控制缓存</p>
<p>此值是由服务器自动生成的</p>
<p>If-Modified-Since：记录服务器响应的Last-Modified值</p>
<p>此值是由服务器自动生成的</p>
<ul>
<li><strong>3、请求主体</strong></li>
</ul>
<p>即传递给服务端的数据</p>
<p>注：当以post形式提交表单的时候，请求头里会设置</p>
<p>Content-Type: application/x-www-form-urlencoded，以get形式当不需要</p>
<h5 id="7-2-2、-响应和响应报文"><a href="#7-2-2、-响应和响应报文" class="headerlink" title="7.2.2、 响应和响应报文"></a>7.2.2、 响应和响应报文</h5><p>响应由服务器发出，其规范格式为：状态行、响应头、响应主体。</p>
<ul>
<li><strong>1、状态行</strong></li>
</ul>
<p>由协议版本号、状态码和状态信息构成<br>    HTTP/1.1 200 OK</p>
<ul>
<li><strong>2、响应头</strong></li>
</ul>
<p>Date：响应时间</p>
<p>Server：服务器信息</p>
<p>Last-Modified：资源最后修改时间 由服务器自动生成</p>
<p>ETag：资源修改后生成的唯一标识</p>
<p>由服务器自动生成</p>
<p>Content-Length：响应主体长度</p>
<p>Content-Type：响应资源的类型</p>
<ul>
<li><strong>3、响应主体</strong></li>
</ul>
<p>即服务端返回给客户端的内容；</p>
<ul>
<li>状态码</li>
</ul>
<p>常见的有200代表成功、304文档未修改、403没有权限、404未找到、500服务器错误</p>
<p><img src="get请求.png" alt=""><br><img src="post请求.png" alt=""></p>
<h2 id="8、AJAX编程"><a href="#8、AJAX编程" class="headerlink" title="8、AJAX编程"></a>8、AJAX编程</h2><blockquote>
<p>即 Asynchronous [e’sɪŋkrənəs] Javascript And XML，<br>AJAX 不是一门的新的语言，而是对现有技术的综合利用。<br>本质是在HTTP协议的基础上以异步的方式与服务器进行通信。</p>
</blockquote>
<h4 id="8-1、-异步"><a href="#8-1、-异步" class="headerlink" title="8.1、 异步"></a>8.1、 异步</h4><p>指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。</p>
<p><strong>其优势在于不阻塞程序的执行，从而提升整体执行效率。</strong></p>
<p>XMLHttpRequest可以以异步方式的处理程序。</p>
<h4 id="8-2、-XMLHttpRequest"><a href="#8-2、-XMLHttpRequest" class="headerlink" title="8.2、 XMLHttpRequest"></a>8.2、 XMLHttpRequest</h4><p>浏览器内建对象，用于在后台与服务器通信(交换数据) ，<br>由此我们便可实现对网页的部分更新，而不是刷新整个页面。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/*js 内置的 http 请求对象  XMLHttpRequest*/</span></div><div class="line"></div><div class="line"><span class="comment">/*1.怎么使用 这个内置对象*/</span></div><div class="line"><span class="keyword">var</span> xhr = <span class="keyword">new</span> XMLHttpRequest;</div><div class="line"></div><div class="line"><span class="comment">/*2.怎么样去组请求*/</span></div><div class="line"><span class="comment">/*请求的行*/</span></div><div class="line">xhr.open(<span class="string">'post'</span>,<span class="string">'01.php'</span>);</div><div class="line"></div><div class="line"><span class="comment">/*请求头*/</span></div><div class="line"><span class="comment">//get  没有必要设置</span></div><div class="line"><span class="comment">//post 必须设置 Content-Type: application/x-www-form-urlencoded</span></div><div class="line">xhr.setRequestHeader(<span class="string">'Content-Type'</span>,<span class="string">'application/x-www-form-urlencoded'</span>);</div><div class="line"></div><div class="line"><span class="comment">/*请内容*/</span></div><div class="line"><span class="comment">/*3.发送请求*/</span></div><div class="line">xhr.send(<span class="string">"name=xjj&amp;age=10"</span>);</div></pre></td></tr></table></figure>
<h5 id="8-2-1、请求"><a href="#8-2-1、请求" class="headerlink" title="8.2.1、请求"></a>8.2.1、请求</h5><p>HTTP请求3个组成部分与XMLHttpRequest方法的对应关系</p>
<p>1、请求行</p>
<pre><code>xhr.open(&apos;post&apos;,&apos;01.php&apos;);
</code></pre><p>2、请求头</p>
<pre><code>xhr.setRequestHeader(&apos;Content-Type&apos;,&apos;application/x-www-form-urlencoded&apos;);
get请求可以不设置
</code></pre><p>3、请求主体</p>
<pre><code>xhr.send(&quot;name=xjj&amp;age=10&quot;);
get可以传空
</code></pre><p><strong>注意书写顺序</strong></p>
<h5 id="8-2-2、响应"><a href="#8-2-2、响应" class="headerlink" title="8.2.2、响应"></a>8.2.2、响应</h5><p>HTTP响应是由服务端发出的，作为客户端更应关心的是响应的结果。</p>
<p>HTTP响应3个组成部分与XMLHttpRequest方法或属性的对应关系。</p>
<p>由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">if</span>(xhr.readyState == <span class="number">4</span> &amp;&amp; xhr.status == <span class="number">200</span>)&#123;</div><div class="line">    <span class="built_in">console</span>.log(<span class="string">'ok'</span>);</div><div class="line">    <span class="built_in">console</span>.log(xhr.responseText);</div><div class="line">    <span class="comment">/*把内容渲染在页面当中*/</span></div><div class="line">    <span class="built_in">document</span>.querySelector(<span class="string">'#result'</span>).innerHTML = xhr.responseText;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<pre><code>**readyState**
0：请求未初始化（还没有调用 open()）。  
1：请求已经建立，但是还没有发送（还没有调用 send()）。  
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。  
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。  
4：响应已完成；您可以获取并使用服务器的响应了。
</code></pre><p>onreadystatechange是Javascript的事件的一种，其意义在于监听XMLHttpRequest的状态</p>
<p>1、获取状态行（包括状态码&amp;状态信息）</p>
<pre><code>xhr.status 状态码

xhr.statusText 状态码信息
</code></pre><p>2、获取响应头</p>
<pre><code>xhr.getResponseHeader(&apos;Content-Type&apos;);
xhr.getAllResponseHeaders();
</code></pre><p>3、响应主体  </p>
<pre><code>xhr.responseText
xhr.responseXML
</code></pre><p>我们需要检测并判断响应头的MIME类型后确定使用request.responseText或者request.responseXML</p>
<h5 id="8-3-3、API详解"><a href="#8-3-3、API详解" class="headerlink" title="8.3.3、API详解"></a>8.3.3、API详解</h5><pre><code>xhr.open() 发起请求，可以是get、post方式
xhr.setRequestHeader() 设置请求头
xhr.send() 发送请求主体get方式使用xhr.send(null)
xhr.onreadystatechange = function () {} 监听响应状态
xhr.status表示响应码，如200
xhr.statusText表示响应信息，如OK
xhr.getAllResponseHeaders() 获取全部响应头信息
xhr.getResponseHeader(&apos;key&apos;) 获取指定头信息
xhr.responseText、xhr.responseXML都表示响应主体
</code></pre><p> 注：GET和POST请求方式的差异（面试题）</p>
<p> 1、GET没有请求主体，使用xhr.send(null)</p>
<p> 2、GET可以通过在请求URL上添加请求参数</p>
<p> 3、POST可以通过xhr.send(‘name=itcast&amp;age=10’)</p>
<p> 4、POST需要设置</p>
<p> 5、GET效率更好（应用多）</p>
<p> 6、GET大小限制约4K，POST则没有限制</p>
<p> 问题？如何获取复杂数据呢？</p>
<h4 id="8-3、-XML"><a href="#8-3、-XML" class="headerlink" title="8.3、 XML"></a>8.3、 XML</h4><p>1、必须有一个根元素<br>2、不可有空格、不可以数字或.开头、大小写敏感<br>3、不可交叉嵌套<br>4、属性双引号（浏览器自动修正成双引号了）<br>5、特殊符号要使用实体<br>6、注释和HTML一样<br>虽然可以描述和传输复杂数据，但是其解析过于复杂并且体积较大，所以实现开发已经很少使用了。</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line"><span class="php"><span class="meta">&lt;?</span>xml version=<span class="string">"1.0"</span> encoding=<span class="string">"UTF-8"</span><span class="meta">?&gt;</span></span></div><div class="line"><span class="tag">&lt;<span class="name">root</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">arrayList</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">array</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">src</span>&gt;</span>images/banner.jpg<span class="tag">&lt;/<span class="name">src</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">newPirce</span>&gt;</span>12.00<span class="tag">&lt;/<span class="name">newPirce</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">oldPrice</span>&gt;</span>30.00<span class="tag">&lt;/<span class="name">oldPrice</span>&gt;</span></div><div class="line">        <span class="tag">&lt;/<span class="name">array</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">array</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">src</span>&gt;</span>images/banner.jpg<span class="tag">&lt;/<span class="name">src</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">newPirce</span>&gt;</span>12.00<span class="tag">&lt;/<span class="name">newPirce</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">oldPrice</span>&gt;</span>30.00<span class="tag">&lt;/<span class="name">oldPrice</span>&gt;</span></div><div class="line">        <span class="tag">&lt;/<span class="name">array</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">arrayList</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">root</span>&gt;</span></div></pre></td></tr></table></figure>
<figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;?php</span> </div><div class="line">    header(<span class="string">'Content-Type:text/xml;charset=utf-8'</span>);</div><div class="line">    <span class="comment">/*以xml格式传输数据的时候要求响应内容格式是   text/xml*/</span></div><div class="line"></div><div class="line">    <span class="comment">/*file_get_contents 获取文件内容*/</span></div><div class="line">    $xml = file_get_contents(<span class="string">'01.xml'</span>);</div><div class="line"></div><div class="line">    <span class="comment">/*输出xml内容*/</span></div><div class="line">    <span class="keyword">echo</span> $xml;</div><div class="line"><span class="meta">?&gt;</span></div></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> xhr = <span class="keyword">new</span> XMLHttpRequest;</div><div class="line">xhr.open(<span class="string">'get'</span>,<span class="string">'01.php'</span>);</div><div class="line">xhr.send(<span class="literal">null</span>);</div><div class="line">xhr.onreadystatechange = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">if</span>(xhr.status == <span class="number">200</span> &amp;&amp; xhr.readyState == <span class="number">4</span>)&#123;</div><div class="line">        <span class="comment">/*获取到XML格式内容  放回的是DOM对象  document*/</span></div><div class="line">        <span class="keyword">var</span> xml = xhr.responseXML;</div><div class="line">        <span class="comment">/*通过选着器可以获取到xml的数据*/</span></div><div class="line">        <span class="built_in">console</span>.log(xml.querySelectorAll(<span class="string">'array'</span>)[<span class="number">0</span>].querySelector(<span class="string">'src'</span>).innerHTML);</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h4 id="8-4、-JSON"><a href="#8-4、-JSON" class="headerlink" title="8.4、 JSON"></a>8.4、 JSON</h4><p>即 JavaScript Object Notation，另一种轻量级的文本数据交换格式，独立于语言。</p>
<p>1、数据在名称/值对中<br>2、数据由逗号分隔(最后一个健/值对不能带逗号)<br>3、花括号保存对象方括号保存数组<br>4、使用双引号  </p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">[</div><div class="line">  &#123;<span class="attr">"src"</span>:<span class="string">"images/detail01.jpg"</span>,<span class="attr">"oldPrice"</span>:<span class="string">"10.12"</span>,<span class="attr">"newPrice"</span>:<span class="string">"130.00"</span>&#125;,</div><div class="line">  &#123;<span class="attr">"src"</span>:<span class="string">"images/detail02.jpg"</span>,<span class="attr">"oldPrice"</span>:<span class="string">"1.00"</span>,<span class="attr">"newPrice"</span>:<span class="string">"11.00"</span>&#125;,</div><div class="line">  &#123;<span class="attr">"src"</span>:<span class="string">"images/detail03.jpg"</span>,<span class="attr">"oldPrice"</span>:<span class="string">"100.00"</span>,<span class="attr">"newPrice"</span>:<span class="string">"1000.00"</span>&#125;</div><div class="line">]</div></pre></td></tr></table></figure>
<p>JSON数据在不同语言进行传输时，类型为字符串，不同的语言各自也都对应有解析方法，需要解析完成后才能读取</p>
<p><strong>1、PHP解析方法</strong><br>json_encode()、json_decode()<br><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;?php</span> </div><div class="line">    header(<span class="string">'Content-Type:text/html;charset=utf-8'</span>);</div><div class="line">    <span class="comment">/*以json格式传输数据的时候要求响应内容格式是   application/json*/</span></div><div class="line">    <span class="comment">/*注意也可以不设置  但是这遵循的一个规范*/</span></div><div class="line"></div><div class="line">    <span class="comment">/*file_get_contents 获取文件内容*/</span></div><div class="line">    $json = file_get_contents(<span class="string">'01.json'</span>);</div><div class="line"></div><div class="line">    <span class="comment">/*输出json内容*/</span></div><div class="line">    <span class="keyword">echo</span> $json;</div><div class="line">    <span class="keyword">echo</span> <span class="string">'&lt;br&gt;&lt;br&gt;'</span>;</div><div class="line"></div><div class="line">    $array = <span class="keyword">array</span>(</div><div class="line">        <span class="keyword">array</span>(<span class="string">'src'</span>=&gt;<span class="string">'images/detail01.jpg'</span>,<span class="string">'newPrice'</span>=&gt;<span class="string">'12.00'</span>,<span class="string">'oldPrice'</span>=&gt;<span class="string">'455.00'</span>),</div><div class="line">        <span class="keyword">array</span>(<span class="string">'src'</span>=&gt;<span class="string">'images/detail02.jpg'</span>,<span class="string">'newPrice'</span>=&gt;<span class="string">'65.00'</span>,<span class="string">'oldPrice'</span>=&gt;<span class="string">'878.00'</span>),</div><div class="line">        <span class="keyword">array</span>( <span class="string">'src'</span>=&gt;<span class="string">'images/detail01.jpg'</span>,<span class="string">'newPrice'</span>=&gt;<span class="string">'100.00'</span>,<span class="string">'oldPrice'</span>=&gt;<span class="string">'1000.00'</span>)</div><div class="line">    );</div><div class="line"></div><div class="line">    <span class="comment">/*将php数组转化成json字符*/</span></div><div class="line">    $json_array = json_encode($array);</div><div class="line">    <span class="keyword">echo</span> $json_array;</div><div class="line">    <span class="keyword">echo</span> <span class="string">'&lt;br&gt;&lt;br&gt;'</span>;</div><div class="line"></div><div class="line">    <span class="comment">/*将json字符转化成php数组*/</span></div><div class="line">    $array_json = json_decode($json_array);</div><div class="line">    <span class="keyword">echo</span> $array_json;</div><div class="line">    <span class="keyword">echo</span> <span class="string">'&lt;br&gt;&lt;br&gt;'</span>;</div><div class="line"><span class="meta">?&gt;</span></div><div class="line">```  </div><div class="line">**<span class="number">1</span>、Javascript 解析方法**  </div><div class="line">JSON对象  JSON.parse()、JSON.stringify()；  </div><div class="line">JSON兼容处理json2.js  </div><div class="line">总结：JSON体积小、解析方便且高效，在实际开发成为首选。</div><div class="line">```javascript</div><div class="line">    <span class="keyword">var</span> xhr = <span class="keyword">new</span> XMLHttpRequest;</div><div class="line">    xhr.open(<span class="string">'get'</span>,<span class="string">'01.php'</span>);</div><div class="line">    xhr.send(<span class="keyword">null</span>);</div><div class="line">    xhr.onreadystatechange = <span class="function"><span class="keyword">function</span><span class="params">()</span></span>&#123;</div><div class="line">        <span class="keyword">if</span>(xhr.status == <span class="number">200</span> &amp;&amp; xhr.readyState == <span class="number">4</span>)&#123;</div><div class="line">            <span class="comment">/*获取仅仅是字符串*/</span></div><div class="line">            <span class="keyword">var</span> text = xhr.responseText;</div><div class="line">            </div><div class="line">            <span class="comment">/*需要把字符串转化成JSON对象*/</span></div><div class="line">            <span class="keyword">var</span> json_obj = JSON.parse(text);</div><div class="line">            console.log(json_obj);</div><div class="line">    </div><div class="line">            <span class="comment">/*我们也可以把JSON对象转化成字符串*/</span></div><div class="line">            <span class="keyword">var</span> json_str = JSON.stringify(json_obj);</div><div class="line">            console.log(json_str);</div><div class="line">        &#125;</div><div class="line">    &#125;</div></pre></td></tr></table></figure></p>
<h4 id="8-5、-兼容性"><a href="#8-5、-兼容性" class="headerlink" title="8.5、 兼容性"></a>8.5、 兼容性</h4><p><strong>关于IE的兼容方面，了解即可。</strong><br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">XHR</span>(<span class="params"></span>) </span>&#123;</div><div class="line">    <span class="keyword">var</span> xhr;</div><div class="line">    <span class="keyword">try</span> &#123;</div><div class="line">        xhr = <span class="keyword">new</span> XMLHttpRequest();</div><div class="line">    &#125;</div><div class="line">    <span class="comment">/*如果 try内的程序运行错误  抛出异常  捕捉异常  上面程序当中运行的错误*/</span></div><div class="line">    <span class="keyword">catch</span>(e) &#123;</div><div class="line">        <span class="comment">/*在不同的IE版本下初始  ActiveXObject  需要传入的标识*/</span></div><div class="line">        <span class="keyword">var</span> IEXHRVers =[<span class="string">"Msxml3.XMLHTTP"</span>,<span class="string">"Msxml2.XMLHTTP"</span>,<span class="string">"Microsoft.XMLHTTP"</span>];</div><div class="line"></div><div class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;IEXHRVers.length;i++) &#123;</div><div class="line">            <span class="keyword">try</span> &#123;</div><div class="line">                xhr = <span class="keyword">new</span> ActiveXObject(IEXHRVers[i]);</div><div class="line">            &#125;</div><div class="line">            <span class="keyword">catch</span>(e) &#123;</div><div class="line">                <span class="comment">/*如果出现错误的时候  停止当次的循环*/</span></div><div class="line">                <span class="keyword">continue</span>;</div><div class="line">            &#125;</div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line">    <span class="keyword">return</span> xhr;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h4 id="8-6、-封装ajax工具函数"><a href="#8-6、-封装ajax工具函数" class="headerlink" title="8.6、 封装ajax工具函数"></a>8.6、 封装ajax工具函数</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div><div class="line">97</div><div class="line">98</div><div class="line">99</div><div class="line">100</div><div class="line">101</div><div class="line">102</div><div class="line">103</div><div class="line">104</div><div class="line">105</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/**</span></div><div class="line"><span class="comment"> * ITCAST WEB</span></div><div class="line"><span class="comment"> * Created by zhousg on 2016/5/24.</span></div><div class="line"><span class="comment"> */</span></div><div class="line"><span class="comment">/*</span></div><div class="line"><span class="comment"> * 1. 请求的类型                type    get post</span></div><div class="line"><span class="comment"> * 2. 请求地址                  url</span></div><div class="line"><span class="comment"> * 3. 是异步的还是同步的         async   false true</span></div><div class="line"><span class="comment"> * 4. 请求内容的格式            contentType</span></div><div class="line"><span class="comment"> * 5. 传输的数据                data    json对象</span></div><div class="line"><span class="comment"> *</span></div><div class="line"><span class="comment"> * 6.响应成功处理函数           success   function</span></div><div class="line"><span class="comment"> * 7.响应失败的处理函数         error     function</span></div><div class="line"><span class="comment"> *</span></div><div class="line"><span class="comment"> * 这些都是动态参数  参数对象  options</span></div><div class="line"><span class="comment"> * */</span></div><div class="line"></div><div class="line"><span class="comment">/*封装一个函数*/</span></div><div class="line"><span class="built_in">window</span>.$ = &#123;&#125;;</div><div class="line"><span class="comment">/*申明一个ajax的方法*/</span></div><div class="line">$.ajax = <span class="function"><span class="keyword">function</span>(<span class="params">options</span>)</span>&#123;</div><div class="line"></div><div class="line">    <span class="keyword">if</span>(!options || <span class="keyword">typeof</span> options != <span class="string">'object'</span>)&#123;</div><div class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    <span class="comment">/*请求的类型*/</span></div><div class="line">    <span class="keyword">var</span> type = options.type || <span class="string">'get'</span>;<span class="comment">/*默认get*/</span></div><div class="line">    <span class="comment">/*请求地址 */</span></div><div class="line">    <span class="keyword">var</span> url = options.url || location.pathname;<span class="comment">/*当前的地址*/</span></div><div class="line">    <span class="comment">/*是异步的还是同步的 */</span></div><div class="line">    <span class="keyword">var</span> <span class="keyword">async</span> = (options.async === <span class="literal">false</span>)?<span class="literal">false</span>:<span class="literal">true</span>;<span class="comment">/*默认异步*/</span></div><div class="line">    <span class="comment">/*请求内容的格式 */</span></div><div class="line">    <span class="keyword">var</span> contentType = options.contentType || <span class="string">"text/html"</span>;</div><div class="line"></div><div class="line">    <span class="comment">/*传输的数据 */</span></div><div class="line">    <span class="keyword">var</span> data = options.data || &#123;&#125;;<span class="comment">/*｛name:'',age:''｝*/</span></div><div class="line">    <span class="comment">/*在提交的时候需要转成 name=xjj 这种格式*/</span></div><div class="line"></div><div class="line">    <span class="keyword">var</span> dataStr = <span class="string">''</span><span class="comment">/*数据字符串*/</span></div><div class="line"></div><div class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">in</span> data)&#123;</div><div class="line">        dataStr += key+<span class="string">'='</span>+data[key]+<span class="string">'&amp;'</span>;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    dataStr = dataStr &amp;&amp; dataStr.slice(<span class="number">0</span>,<span class="number">-1</span>);</div><div class="line"></div><div class="line">    <span class="comment">/*ajax 编程*/</span></div><div class="line">    <span class="keyword">var</span> xhr = <span class="keyword">new</span> XMLHttpRequest();</div><div class="line"></div><div class="line">    <span class="comment">/*请求行*/</span></div><div class="line">    <span class="comment">/*(type=='get'?url+'?'+dataStr:url)判断当前的请求类型*/</span></div><div class="line">    xhr.open(type,(type==<span class="string">'get'</span>?url+<span class="string">'?'</span>+dataStr:url),<span class="keyword">async</span>);</div><div class="line"></div><div class="line">    <span class="comment">/*请求头*/</span></div><div class="line">    <span class="keyword">if</span>(type == <span class="string">'post'</span>)&#123;</div><div class="line">        xhr.setRequestHeader(<span class="string">'Content-Type'</span>,<span class="string">'application/x-www-form-urlencoded'</span>);</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    <span class="comment">/*请求主体*/</span></div><div class="line">    <span class="comment">/*需要判断请求类型*/</span></div><div class="line">    xhr.send(type==<span class="string">'get'</span>?<span class="literal">null</span>:dataStr);</div><div class="line"></div><div class="line">    <span class="comment">/*监听响应状态的改变  响应状态*/</span></div><div class="line">    xhr.onreadystatechange = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        <span class="comment">/*请求响应完成并且成功*/</span></div><div class="line">        <span class="keyword">if</span>(xhr.readyState == <span class="number">4</span> &amp;&amp; xhr.status == <span class="number">200</span>)&#123;</div><div class="line">            <span class="comment">/*success*/</span></div><div class="line">            <span class="keyword">var</span> data = <span class="string">''</span>;</div><div class="line">            <span class="keyword">var</span> contentType = xhr.getResponseHeader(<span class="string">'Content-Type'</span>);</div><div class="line">            <span class="comment">/*如果我们服务器返回的是xml*/</span></div><div class="line">            <span class="keyword">if</span>(contentType.indexOf(<span class="string">'xml'</span>) &gt; <span class="number">-1</span>)&#123;</div><div class="line">                data = xhr.responseXML;</div><div class="line">            &#125;</div><div class="line">            <span class="comment">/*如果我们的服务器返回的是json字符串*/</span></div><div class="line">            <span class="keyword">else</span> <span class="keyword">if</span>(contentType.indexOf(<span class="string">'json'</span>) &gt; <span class="number">-1</span>)&#123;</div><div class="line">                <span class="comment">/*转化json对象*/</span></div><div class="line">                data = <span class="built_in">JSON</span>.parse(xhr.responseText);</div><div class="line">            &#125;</div><div class="line">            <span class="comment">/*否则的话他就是字符串*/</span></div><div class="line">            <span class="keyword">else</span>&#123;</div><div class="line">                data = xhr.responseText;</div><div class="line">            &#125;</div><div class="line"></div><div class="line">            <span class="comment">/*回调 成功处理函数*/</span></div><div class="line"></div><div class="line">            options.success &amp;&amp; options.success(data);</div><div class="line">        &#125;</div><div class="line">        <span class="comment">/*计时请求xhr.status不成功  他也需要的响应完成才认作是一个错误的请求*/</span></div><div class="line">        <span class="keyword">else</span> <span class="keyword">if</span>(xhr.readyState == <span class="number">4</span>)&#123;</div><div class="line">            <span class="comment">/*error*/</span></div><div class="line">            options.error &amp;&amp; options.error(<span class="string">'you request fail !'</span>);</div><div class="line"></div><div class="line">        &#125;</div><div class="line"></div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line">$.post = <span class="function"><span class="keyword">function</span>(<span class="params">options</span>)</span>&#123;</div><div class="line">    options.type = <span class="string">'post'</span>;</div><div class="line">    $.ajax(options);</div><div class="line">&#125;</div><div class="line">$.get = <span class="function"><span class="keyword">function</span>(<span class="params">options</span>)</span>&#123;</div><div class="line">    options.type = <span class="string">'get'</span>;</div><div class="line">    $.ajax(options);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h4 id="8-7、-jquery的ajax"><a href="#8-7、-jquery的ajax" class="headerlink" title="8.7、 jquery的ajax"></a>8.7、 jquery的ajax</h4><ul>
<li>jQuery为我们提供了更强大的Ajax封装</li>
<li>$.ajax({}) 可配置方式发起Ajax请求</li>
<li>$.get() 以GET方式发起Ajax请求</li>
<li>$.post() 以POST方式发起Ajax请求</li>
<li>$(‘form’).serialize() 序列化表单（即格式化key=val&amp;key=val）</li>
<li>url 接口地址</li>
<li>type 请求方式</li>
<li>timeout 请求超时</li>
<li>dataType 服务器返回格式</li>
<li>data 发送请求数据</li>
<li>beforeSend: function () {} 请求发起前调用</li>
<li>success 成功响应后调用</li>
<li>error 错误响应时调用</li>
<li>complete 响应完成时调用（包括成功和失败）</li>
<li>jQuery Ajax介绍</li>
<li><a href="http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp" target="_blank" rel="external">http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp</a></li>
</ul>
<h4 id="8-8、-案例练习"><a href="#8-8、-案例练习" class="headerlink" title="8.8、 案例练习"></a>8.8、 案例练习</h4><p>1、Loading状态<br>2、禁止重复提交<br>3、表单处理<br>4、数据验证<br>接口化开发<br>请求地址即所谓的接口，通常我们所说的接口化开发，其实是指一个接口对应一个功能，<br>并且严格约束了请求参数和响应结果的格式，这样前后端在开发过程中，可以减少不必要的讨论，<br>从而并行开发，可以极大的提升开发效率，另外一个好处，当网站进行改版后，服务端接口只需要进行微调。</p>
<p><strong>具体参考代码</strong></p>
<h2 id="9、模版引擎"><a href="#9、模版引擎" class="headerlink" title="9、模版引擎"></a>9、模版引擎</h2><h4 id="9-2、-artTemplate-简介语法模板"><a href="#9-2、-artTemplate-简介语法模板" class="headerlink" title="9.2、 artTemplate 简介语法模板"></a>9.2、 artTemplate 简介语法模板</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"dist/template.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<p>下载(<a href="https://raw.github.com/aui/artTemplate/master/dist/template.js" target="_blank" rel="external">https://raw.github.com/aui/artTemplate/master/dist/template.js</a>)</p>
<p>编写模版</p>
<pre><code>&lt;script id=&quot;test&quot; type=&quot;text/html&quot;&gt;
&lt;h1&gt;{{title}}&lt;/h1&gt;
&lt;ul&gt;
    {{each list as value i}}
        &lt;li&gt;索引 {{i + 1}} ：{{value}}&lt;/li&gt;
    {{/each}}
&lt;/ul&gt;
&lt;/script&gt;
</code></pre><p>渲染数据</p>
<pre><code>var data = {
    title: &apos;标签&apos;,
    list: [&apos;文艺&apos;, &apos;博客&apos;, &apos;摄影&apos;, &apos;电影&apos;, &apos;民谣&apos;, &apos;旅行&apos;, &apos;吉他&apos;]
};
var html = template(&apos;test&apos;, data);
document.getElementById(&apos;content&apos;).innerHTML = html;
</code></pre><p>简介语法    </p>
<pre><code>{{if admin}}
    {{include 'admin_content'}}

    {{each list}}
        &lt;div&gt;{{$index}}. {{$value.user}}&lt;/div&gt;
    {{/each}}
{{/if}}
</code></pre><h4 id="9-1、-artTemplate-原生-js-模板语法版"><a href="#9-1、-artTemplate-原生-js-模板语法版" class="headerlink" title="9.1、 artTemplate 原生 js 模板语法版"></a>9.1、 artTemplate 原生 js 模板语法版</h4><p><strong>使用</strong></p>
<p>在页面中引用模板引擎：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"dist/template-native.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<p>下载(<a href="https://raw.github.com/aui/artTemplate/master/dist/template-native.js" target="_blank" rel="external">https://raw.github.com/aui/artTemplate/master/dist/template-native.js</a>)</p>
<p><strong>表达式</strong></p>
<pre><code>&lt;% 与 %&gt; 符号包裹起来的语句则为模板的逻辑表达式。
</code></pre><p><strong>输出表达式</strong></p>
<p>对内容编码输出：</p>
<pre><code>&lt;%=content%&gt;
</code></pre><p>不编码输出：</p>
<pre><code>&lt;%=#content%&gt;
</code></pre><p>编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击。</p>
<p><strong>逻辑</strong></p>
<p>支持使用 js 原生语法</p>
<pre><code>&lt;h1&gt;&lt;%=title%&gt;&lt;/h1&gt;
&lt;ul&gt;
    &lt;%for(i = 0; i &lt; list.length; i ++) {%>
            <li>条目内容 <%=i +="" 1%=""> ：<%=list[i]%></%=list[i]%></%=i></li>
        <%}%&gt; &lt;="" ul&gt;="" <="" code=""></%}%&gt;></code></pre><p>模板不能访问全局对象，公用的方法请参见文档 辅助方法 章节<br>模板包含表达式</p>
<p>用于嵌入子模板。</p>
<pre><code>&lt;% include(&apos;template_name&apos;) %&gt;
</code></pre><p>子模板默认共享当前数据，亦可以指定数据：</p>
<pre><code>&lt;% include(&apos;template_name&apos;, news_list) %&gt;
</code></pre><p>辅助方法</p>
<p>使用template.helper(name, callback)注册公用辅助方法，例如一个基本的 UBB 替换方法：</p>
<pre><code>template.helper(&apos;$ubb2html&apos;, function (content) {
    // 处理字符串...
    return content;
});
</code></pre><p>模板中使用的方式：</p>
<pre><code>&lt;% $ubb2html(content) %&gt;
</code></pre><h2 id="10、同源-amp-跨域"><a href="#10、同源-amp-跨域" class="headerlink" title="10、同源&amp;跨域"></a>10、同源&amp;跨域</h2><p>####10.1    同源</p>
<p>同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。</p>
<p>####10.2    跨域</p>
<p>不同源则跨域<br>例如<a href="http://www.example.com/" target="_blank" rel="external">http://www.example.com/</a></p>
<pre><code>http://api.example.com/detail.html  不同源 域名不同  
https//www.example.com/detail.html   不同源 协议不同  
http://www.example.com:8080/detail.html    不同源    端口不同  
http://api.example.com:8080/detail.html    不同源    域名、端口不同  
https://api.example.com/detail.html    不同源    协议、域名不同  
https://www.example.com:8080/detail.html    不同源    端口、协议不同  
http://www.example.com/detail/index.html    同源    只是目录不同  
</code></pre><p>####10.3    跨域方案（课外拓展）</p>
<p>1、顶级域名相同的可以通过domain.name来解决，即同时设置 domain.name = 顶级域名（如example.com）<br>2、document.domain + iframe<br>3、window.name + iframe<br>4、location.hash + iframe<br>5、window.postMessage()  </p>
<p>参考资料<br><a href="http://rickgray.me/2015/09/03/solutions-to-cross-domain-in-browser.html" target="_blank" rel="external">http://rickgray.me/2015/09/03/solutions-to-cross-domain-in-browser.html</a></p>
<h4 id="10-4、-jsonp"><a href="#10-4、-jsonp" class="headerlink" title="10.4、 jsonp"></a>10.4、 jsonp</h4><blockquote>
<p>JSON with Padding</p>
</blockquote>
<p><strong>1、原理剖析</strong></p>
<p>其本质是利用了<script src=""></script>标签具有可跨域的特性，<br>由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来，<br>此方法需要前后端配合完成。</p>
<pre><code>&lt;!--
当我们用script标签去加载的时候  会把内容解析成js去执行
--&gt;
&lt;script&gt;
    function fuc(data){
        console.log(data.name);
    }
&lt;/script&gt;
&lt;script src=&quot;http://www.guangzhou.com/api.php?callback=fuc&quot;&gt;&lt;/script&gt;
</code></pre><h2 id="11、综合案例"><a href="#11、综合案例" class="headerlink" title="11、综合案例"></a>11、综合案例</h2><h4 id="11-1、瀑布流案例（必须掌握）"><a href="#11-1、瀑布流案例（必须掌握）" class="headerlink" title="11.1、瀑布流案例（必须掌握）"></a>11.1、瀑布流案例（必须掌握）</h4><h4 id="11-2、天气接口（必须掌握）"><a href="#11-2、天气接口（必须掌握）" class="headerlink" title="11.2、天气接口（必须掌握）"></a>11.2、天气接口（必须掌握）</h4><p>接口地址<br><a href="http://developer.baidu.com/map/carapi-7.htm" target="_blank" rel="external">http://developer.baidu.com/map/carapi-7.htm</a></p>
<pre><code>url: &apos;http://api.map.baidu.com/telematics/v3/weather?output=json&amp;ak=0A5bc3c4fb543c8f9bc54b77bc155724&apos;,
</code></pre><p><img src="jk.png" alt=""></p>

            <div class="post-copyright">
    <div class="content">
        <p>最后更新： 2017年08月27日 21:34</p>
        <p>原始链接： <a class="post-url" href="/2016/06/05/- 副本/" title="Ajax(detailed information)">http://yoursite.com/2016/06/05/- 副本/</a></p>
        <footer>
            <a href="http://yoursite.com">
                <img src="/images/logo.png" alt="yangjunbo">
                yangjunbo
            </a>
        </footer>
    </div>
</div>

      
    </div>
    <footer class="article-footer">
        <ul class="article-footer-menu">
            
            
        </ul>
        
    </footer>
  </div>
</article>


    <aside class="post-toc-pos">
        <nav class="post-toc-wrap">
            <h4>TOC</h4>
            <ol class="post-toc"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#1、服务器"><span class="post-toc-text">1、服务器</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1-1、服务器类型"><span class="post-toc-text">1.1、服务器类型</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1-2、服务器软件"><span class="post-toc-text">1.2、服务器软件</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1-3、HTTP服务器"><span class="post-toc-text">1.3、HTTP服务器</span></a></li></ol></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#2、客户端"><span class="post-toc-text">2、客户端</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#3、网络基础"><span class="post-toc-text">3、网络基础</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#3-1-IP地址"><span class="post-toc-text">3.1 IP地址</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#3-2、域名"><span class="post-toc-text">3.2、域名</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#3-3、DNS服务"><span class="post-toc-text">3.3、DNS服务</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#3-4、端口"><span class="post-toc-text">3.4、端口</span></a></li></ol></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#4、软件架构"><span class="post-toc-text">4、软件架构</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#4-1、C-S结构"><span class="post-toc-text">4.1、C/S结构</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#4-2、B-S结构"><span class="post-toc-text">4.2、B/S结构</span></a></li></ol></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#5、搭建HTTP服务"><span class="post-toc-text">5、搭建HTTP服务</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#5-1-安装WampServer"><span class="post-toc-text">5.1 安装WampServer</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#5-2-管理HTTP服务"><span class="post-toc-text">5.2 管理HTTP服务</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#5-3-配置根目录"><span class="post-toc-text">5.3 配置根目录</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#5-4-网站部署"><span class="post-toc-text">5.4 网站部署</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#5-5配置虚拟主机"><span class="post-toc-text">5.5配置虚拟主机</span></a></li></ol></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#6、PHP基础"><span class="post-toc-text">6、PHP基础</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#6-1、最简单的php程序"><span class="post-toc-text">6.1、最简单的php程序</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#6-3、变量"><span class="post-toc-text">6.3、变量</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#6-3、数据类型"><span class="post-toc-text">6.3、数据类型</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#6-4、运算符-amp-内容输出"><span class="post-toc-text">6.4、运算符&内容输出</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#6-5、函数"><span class="post-toc-text">6.5、函数</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#6-6、分支，循环语句"><span class="post-toc-text">6.6、分支，循环语句</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#6-7、表单处理"><span class="post-toc-text">6.7、表单处理</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#6-8、文件导入-amp-amp-常用php函数"><span class="post-toc-text">6.8、文件导入&&常用php函数</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#6-9、应用实例"><span class="post-toc-text">6.9、应用实例</span></a></li></ol></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#7、网络传输协议"><span class="post-toc-text">7、网络传输协议</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#7-1、常见协议"><span class="post-toc-text">7.1、常见协议</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#7-2、http协议"><span class="post-toc-text">7.2、http协议</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#7-2-1、请求和请求报文"><span class="post-toc-text">7.2.1、请求和请求报文</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#7-2-2、-响应和响应报文"><span class="post-toc-text">7.2.2、 响应和响应报文</span></a></li></ol></li></ol></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#8、AJAX编程"><span class="post-toc-text">8、AJAX编程</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#8-1、-异步"><span class="post-toc-text">8.1、 异步</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#8-2、-XMLHttpRequest"><span class="post-toc-text">8.2、 XMLHttpRequest</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#8-2-1、请求"><span class="post-toc-text">8.2.1、请求</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#8-2-2、响应"><span class="post-toc-text">8.2.2、响应</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#8-3-3、API详解"><span class="post-toc-text">8.3.3、API详解</span></a></li></ol></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#8-3、-XML"><span class="post-toc-text">8.3、 XML</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#8-4、-JSON"><span class="post-toc-text">8.4、 JSON</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#8-5、-兼容性"><span class="post-toc-text">8.5、 兼容性</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#8-6、-封装ajax工具函数"><span class="post-toc-text">8.6、 封装ajax工具函数</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#8-7、-jquery的ajax"><span class="post-toc-text">8.7、 jquery的ajax</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#8-8、-案例练习"><span class="post-toc-text">8.8、 案例练习</span></a></li></ol></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#9、模版引擎"><span class="post-toc-text">9、模版引擎</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#9-2、-artTemplate-简介语法模板"><span class="post-toc-text">9.2、 artTemplate 简介语法模板</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#9-1、-artTemplate-原生-js-模板语法版"><span class="post-toc-text">9.1、 artTemplate 原生 js 模板语法版</span></a></li></ol></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#10、同源-amp-跨域"><span class="post-toc-text">10、同源&跨域</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#10-4、-jsonp"><span class="post-toc-text">10.4、 jsonp</span></a></li></ol></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#11、综合案例"><span class="post-toc-text">11、综合案例</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#11-1、瀑布流案例（必须掌握）"><span class="post-toc-text">11.1、瀑布流案例（必须掌握）</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#11-2、天气接口（必须掌握）"><span class="post-toc-text">11.2、天气接口（必须掌握）</span></a></li></ol></li></ol></li></ol>
        </nav>
    </aside>
    

<nav id="article-nav">
  
    <a href="/2017/08/27/javascript (2)/" id="article-nav-newer" class="article-nav-link-wrap">

      <span class="article-nav-title">
        <i class="fa fa-hand-o-left" aria-hidden="true"></i>
        
          (no title)
        
      </span>
    </a>
  
  
    <a href="/2016/06/05/ajax - 副本 (2)/" id="article-nav-older" class="article-nav-link-wrap">
      <span class="article-nav-title">Ajax(detailed information)</span>
      <i class="fa fa-hand-o-right" aria-hidden="true"></i>
    </a>
  
</nav>



    
</section>
        
      </div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info" class="inner">
      
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


      <p>
        Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
        Theme <a href="//github.com/wongminho/hexo-theme-miho" target="_blank">MiHo</a>
      &copy; 2017 yangjunbo<br>
      </p>
    </div>
  </div>
</footer>
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  var mihoConfig = {
      root: "http://yoursite.com",
      animate: true,
      isHome: false
  }
</script>
<div class="sidebar">
    <div id="sidebar-search">
        <i class="fa fa-search"></i>
    </div>
    <div class="sidebar-menu">
        <i class="fa fa-bars"></i>
    </div>
    <div id="sidebar-top">
        <span class="sidebar-top-icon"><i class="fa fa-angle-up"></i></span>
    </div>
</div>
<div class="sidebar-menu-box">
    <div class="sidebar-menu-box-container">
        <div id="sidebar-menu-box-tags">
            
        </div>
    </div>
    <a href="javascript:;" class="sidebar-menu-box-close">&times;</a>
</div>
<div class="search-wrap">
    <span class="search-close">&times;</span>
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
            <i class="icon icon-lg icon-chevron-left"></i>
        </a>
        <input class="search-field" placeholder="Search..." id="keywords">
        <a id="search-submit" href="javascript:;">
            <i class="fa fa-search"></i>
        </a>
</div>

<div class="search-container" id="search-container">
    <ul class="search-result" id="search-result">
    </ul>
</div>
<div id="search-tpl">
    <li class="search-result-item">
        <a href="{url}" class="search-item-li">
            <span class="search-item-li-title" title="{title}">{title}</span>
        </a>
    </li>
</div>
<script src="/js/search.js"></script>
<script src="/js/sidebar-menu-box.js"></script>


  <script src="//cdn.bootcss.com/particles.js/2.0.0/particles.min.js"></script>
  <div id="particles"></div>
  <script src="/js/particles.js"></script>







  <link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.5.0/animate.min.css">
  <script src="//cdn.bootcss.com/scrollReveal.js/3.0.5/scrollreveal.js"></script>
  <script src="/js/animate.js"></script>

  </div>
</body>
</html>